"use client";
import { Badge, Chip } from "@heroui/react";
import Link from "next/link";

export const ListboxWrapper = ({ children }: { children: React.ReactNode }) => (
  <div className="max-w-[260px] p-3 rounded-small border-2 mt-4 flex gap-3 flex-wrap">
    {children}
  </div>
);
export default function TopicList({
  topics,
}: {
  topics: { id: string; name: string; _count: { posts: number } }[];
}) {
  return (
    <ListboxWrapper>
      {topics.map((topic) => {
        return (
          <Badge
            color="secondary"
            content={topic._count.posts}
            shape="circle"
            size="sm"
            key={topic.id}
          >
            <Chip variant="shadow" color="default" key={topic.id}>
              <Link href={`/topics/${topic.name}`} className="text-xs">
                {topic.name}
              </Link>
            </Chip>
          </Badge>
        );
      })}
    </ListboxWrapper>
  );
}
